<style scoped lang="scss">
    .dapan {
    }

    .el-row {
        padding: 10px;
        font-size: 18px;
        background-color: #fff;
        &:not(:last-child) {
            border-bottom:1px solid #eee;
        }
    }

    .el-tag {
        margin: 5px 5px 0 0;
    }
    .rtime{
        font-size: 13px;
        color: #999;
    }
</style>
<template>
    <div class="dapan">
        <div v-for="(item,index) in news" :key="index" class="el-row">
            <p>
                <el-tag
                        v-for="tag in item.tags"
                        :key="tag.id"
                        size="mini"
                        effect="plain"
                        type="warning">
                    {{tag.name}}
                </el-tag>
                <span class="grid-content bg-purple">{{item.title}}</span>
            </p>
            <p>
                <span class="rtime">{{new Date(+item.ctime*1000).toLocaleString().split(' ')[1]}}</span>
            </p>
        </div>
    </div>
</template>
<script>
    import {news} from '../utils/request'

    export default {
        data() {
            return {
                news: [],
                filters: [],
                timer: null
            }
        },
        created() {
            this.getNews();
            this.timer = setInterval(() => {
                this.getNews();
            }, 5000)
        },
        methods: {
            getNews() {
                news().then((res) => {
                    let result = JSON.parse(res.content).data;
                    this.news = result.list;
                    this.filters = result.filter;
                })
            },
            filterFun() {

            }
        },
        beforeDestroy() {
            clearInterval(this.timer);
        }
    }
</script>
